<template>
      <div class="header">
    <div class="header-left">
      <span class="iconfont icon-fanhui"></span>
    </div>
    <div class="header-input">
      <span class="iconfont icon-sousuo"></span>
      <input type="text" placeholder="输入城市/景点/游玩主体" class="search_a">
    </div>
        <router-link to='/city'>
          <div class="header-right">
           {{this.$store.state.city}}<span class="iconfont icon-jiantouarrow486"></span>
          </div>
        </router-link>
  </div>
</template>
<script>
    export default {
        name: "Header"
    }
</script>

<style lang="stylus" scoped>
.header
  height:.44rem
  background-color:#00bcd4
  display:flex
  .header-left
    width:.4rem
    line-height .44rem
    text-align center
    color:#ffffff
  .header-right
    min-width:.58rem
    padding:0 .05rem;
    line-height .40rem
    text-align center
    color:#ffffff
  .header-input
    flex:1
    height:.3rem
    background-color #ffffff
    border-radius:.05rem
    margin-top:.06rem
    line-height :.26rem
    .icon-sousuo
      margin:.02rem 0.03rem 0 0.05rem
      display:inline-block
      vertical-align:middle
      color:#cacaca
  .iconfont
    font-size .18rem
</style>

